<!-- components/Account.vue -->
<template>
  <view class="account-warpper">
    <!-- 标题 -->
    <Navbar title=" "></Navbar>
    <view class="card flex-between">
      <view class="card-left">
        <view class="card-title">
          <text>可提现金额</text>
        </view>
        <view class="card-price ">
          <view class="">
            <text>¥</text>
            <text class="price">{{price}}</text>
          </view>
          <text class="details" @click="toDetails">明细</text>
        </view>
      </view>

    </view>
    <!-- 提现 -->
    <view class="withdrawal">
      <view class="price-box">
        <view class="title">
          <text>提现金额</text>
        </view>
        <view class="price">
          <text>￥</text><input type="number" placeholder="请输入提现金额" v-model="dataForm.price"
            placeholder-class="placeholder" />
        </view>
      </view>
      <view class="bank-card">
        <view class="bank-card-box">
          <view class="title flex-between">
            <text>添加银行卡</text>
            <button @click="editCard" v-if="!isEdit">修改</button>
            <button @click="saveCard" v-else>保存</button>
          </view>
          <view class="bank-card-info">

            <view class="flex-between">
              <text>收款户名 </text>
              <input type="text" v-model="userInfo.bank_truename" placeholder-class="placeholder" :disabled="!isEdit" />
            </view>
            <view class="flex-between">
              <text>收款账号</text>
              <input type="number" v-model="userInfo.bank_card" placeholder-class="placeholder" :disabled="!isEdit">
            </view>
            <view class="flex-between">
              <text>收款银行</text>
              <input type="text" v-model="userInfo.bank_name" placeholder-class="placeholder" :disabled="!isEdit">
            </view>
          </view>
        </view>
      </view>
      <button @click="submit" class="submit">确定提交</button>
    </view>


  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    computed
  } from 'vue'
  import Navbar from '@/components/Navbar.vue'
  import {
    number
  } from '@/uni_modules/uview-plus/libs/function/test'

  const userInfo = ref({
    bank_name: '',
    bank_card: '',
    bank_truename: '',
  })
  const getUserInfo = () => {
    uni.$api.user.userInfo().then(res => {
      if (res.code == 200) {
        res.data.level = parseInt(res.data.level) ? 'VIP会员' : '普通会员';
        userInfo.value = res.data
      }
    })
  }
  getUserInfo()

  // 明细
  const toDetails = () => {
    uni.navigateTo({
      url: '/otherPages/pages/other/withdrawalRecord'
    })
  }
  // 接收传参
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  const price = options.price
  const isEdit = ref(false)
  // 提现
  const dataForm = reactive({
    price: ""
  })
  const submit = () => {
    uni.$api.user.withdraw({
      money: dataForm.price
    }).then((res) => {
		if(res.code == 200){
			uni.showToast({
				title: res.msg
			})
		}
		
    })
  }
  const editCard = () => {
    isEdit.value = true
  }
  const saveCard = () => {
    uni.$api.user.saveBankcard({
      bank_name: userInfo.value.bank_name,
      bank_card: userInfo.value.bank_card,
      bank_truename: userInfo.value.bank_truename,
    }).then((res) => {
      isEdit.value = false
    })
  }
</script>

<style lang="scss" scoped>
  .account-warpper {
    background-color: transparent;

    .card {
      width: 690rpx;
      height: 220rpx;
      background-image: url('/static/index_slices/account_bg.png');
      background-repeat: no-repeat;
      background-size: 690rpx 220rpx;
      margin: 28rpx 30rpx 0;
      position: fixed;
      z-index: 3;

      padding-left: 56rpx;
      color: #313029;
      font-weight: bold;
      font-size: 26rpx;

      .card-price {
        margin-top: 21rpx;
        font-size: 40rpx;
        font-weight: normal;
        display: flex;
        align-items: center;

        .price {
          font-weight: bold;
          font-size: 50rpx;
          margin-left: 10rpx;
          margin-right: 32rpx;

        }

        .details {

          display: inline-block;
          text-align: center;
          font-size: 24rpx;
          color: #313029;
          width: 85rpx;
          height: 48rpx;
          line-height: 48rpx;
          border-radius: 24rpx;
          border: 1px solid #74AC80;
        }

      }

    }

    .withdrawal {
      padding-top: 260rpx;

      .placeholder {
        color: #9FA2A8;
        font-size: 28rpx
      }

      .price-box,
      .bank-card {
        margin: 28rpx 30rpx;
        background-color: #fff;
        border-radius: 10rpx;

      }

      input {
        border: none;

      }

      .title,
      .price>text {
        color: #101624;
        font-size: 34rpx;
        font-weight: bold;

        button {
          margin: 0;
          padding: 0;
          width: 87rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 23rpx;
          background-color: #fff;
          border: 1px solid #C5C9D2;
          font-size: 28rpx;
          color: #313029;
        }

      }

      .price-box {
        padding: 45rpx 20rpx 48rpx;

        .price {
          margin-top: 49rpx;
          display: flex;
          align-items: center;

          input {
            font-size: 42rpx;
            color: #313029;
          }
        }
      }

      .bank-card {
        padding: 46rpx 27rpx 55rpx 20rpx;
        margin-bottom: 64rpx;

        .bank-card-box {
          .bank-card-info {
            font-size: 28rpx;
            color: #666666;

            .flex-between {
              margin-top: 51rpx;

              input {
                text-align: right;
              }
            }

          }
        }
      }

      .submit {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        margin: 0 auto;
        color: #fff;
        font-size: 32rpx;
        background: linear-gradient(to right, #FF5A55, #FD3832);
      }
    }
  }
</style>